<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频库 - 宠物视频控制台</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/fonts.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/fontawesome.min.css') }}">
    <script src="{{ url_for('static', filename='js/tailwind.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/auth.js') }}"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B35',
                        secondary: '#FFB800'
                    },
                    borderRadius: {
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            min-height: 1024px;
            background-color: #F8F9FA;
        }
        .glass-effect {
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.8);
        }
        .video-card:hover {
            transform: translateY(-4px);
            transition: all 0.3s ease;
        }
    </style>
</head>
<body class="bg-gray-50">
    <nav class="fixed top-0 left-0 right-0 z-50 glass-effect border-b border-gray-200">
        <div class="max-w-[1440px] mx-auto px-8 h-16 flex items-center justify-between">
            <div class="flex items-center gap-8">
                <a href="/" class="text-2xl font-['Pacifico'] text-primary">logo</a>
                <div class="relative">
                    <form action="/search" method="GET" class="flex">
                        <input type="text" name="q" placeholder="搜索视频、直播或设备" 
                               class="w-[400px] h-10 pl-10 pr-4 rounded-full bg-gray-100 border-none focus:outline-none focus:ring-2 focus:ring-primary/20 text-sm">
                        <button type="submit" class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
                            <i class="fas fa-search"></i>
                        </button>
                    </form>
                </div>
            </div>
            <div class="flex items-center gap-6">
                {% if user %}
                    <a href="{{ url_for('pages.devices_page') }}" class="flex items-center gap-2 text-gray-600 hover:text-primary !rounded-button">
                        <i class="fas fa-tv text-lg"></i>
                        <span class="whitespace-nowrap">我的设备</span>
                    </a>
                {% endif %}
                {% if user %}
                    <a href="{{ url_for('pages.messages_page') }}" class="flex items-center gap-2 text-gray-600 hover:text-primary !rounded-button">
                        <i class="fas fa-bell text-lg"></i>
                        <span class="whitespace-nowrap">消息</span>
                        {% if unread_count > 0 %}
                            <span class="bg-red-500 text-white text-xs rounded-full px-2 py-1">{{ unread_count }}</span>
                        {% endif %}
                    </a>
                {% endif %}
                {% if user %}
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                            <i class="fas fa-user text-primary"></i>
                        </div>
                        <span class="text-sm text-gray-700">{{ user.username }}</span>
                        <button onclick="logout()" class="text-gray-500 hover:text-primary text-sm">
                            <i class="fas fa-sign-out-alt"></i>
                        </button>
                    </div>
                {% else %}
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
                            <i class="fas fa-user text-gray-600"></i>
                        </div>
                        <a href="{{ url_for('pages.login_page') }}" class="text-gray-600 hover:text-primary text-sm">登录</a>
                        <a href="{{ url_for('pages.register_page') }}" class="text-gray-600 hover:text-primary text-sm">注册</a>
                    </div>
                {% endif %}
            </div>
        </div>
    </nav>

    <main class="max-w-[1440px] mx-auto pt-24 px-8">
        <!-- 页面头部 -->
        <section class="mb-8">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-3xl font-bold text-gray-800 mb-2">视频库</h1>
                    <p class="text-gray-600">发现更多精彩的宠物视频内容</p>
                </div>
                <a href="/" class="text-primary hover:text-primary/80">返回首页</a>
            </div>
        </section>

        <!-- 筛选和排序 -->
        <section class="mb-8">
            <div class="bg-white rounded-xl p-6">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl font-bold">筛选和排序</h2>
                    <div class="flex gap-4">
                        <a href="{{ url_for('pages.video_list') }}" class="px-4 py-2 {% if not current_category %}bg-primary text-white{% else %}bg-gray-100 text-gray-600 hover:bg-gray-200{% endif %} rounded-lg">
                            全部
                        </a>
                        {% for cat in categories %}
                        <a href="{{ url_for('pages.video_list', category=cat.value) }}" 
                           class="px-4 py-2 {% if current_category == cat.value %}bg-primary text-white{% else %}bg-gray-100 text-gray-600 hover:bg-gray-200{% endif %} rounded-lg">
                            {{ cat.name }}
                        </a>
                        {% endfor %}
                    </div>
                </div>
                <div class="flex gap-4">
                                            <a href="{{ url_for('pages.video_list', category=current_category, sort='hot') }}" 
                       class="px-4 py-2 {% if current_sort == 'hot' %}bg-primary text-white{% else %}bg-gray-100 text-gray-600 hover:bg-gray-200{% endif %} rounded-lg">
                        最热
                    </a>
                                            <a href="{{ url_for('pages.video_list', category=current_category, sort='latest') }}" 
                       class="px-4 py-2 {% if current_sort == 'latest' %}bg-primary text-white{% else %}bg-gray-100 text-gray-600 hover:bg-gray-200{% endif %} rounded-lg">
                        最新
                    </a>
                                            <a href="{{ url_for('pages.video_list', category=current_category, sort='recommend') }}" 
                       class="px-4 py-2 {% if current_sort == 'recommend' %}bg-primary text-white{% else %}bg-gray-100 text-gray-600 hover:bg-gray-200{% endif %} rounded-lg">
                        推荐
                    </a>
                </div>
            </div>
        </section>

        <!-- 视频列表 -->
        <section class="mb-8">
            {% if videos %}
                <div class="grid grid-cols-4 gap-6">
                    {% for v in videos %}
                    <a href="{{ url_for('pages.video_detail', video_id=v[0]) }}" class="block">
                        <div class="video-card bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md">
                            <div class="relative h-[180px]">
                                <img src="{{ v[3] }}" class="w-full h-full object-cover">
                                <span class="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded">{{ v[4] }}</span>
                            </div>
                            <div class="p-4">
                                <h3 class="font-medium mb-2 line-clamp-2">{{ v[1] }}</h3>
                                <div class="flex items-center justify-between text-sm text-gray-500">
                                    <span>播放 {{ '%.1f万' % (v[5]/10000) if v[5] >= 10000 else v[5] }}</span>
                                    <div class="flex items-center gap-2">
                                        <i class="fas fa-heart text-primary"></i>
                                        <span>{{ '%.1fk' % (v[6]/1000) if v[6] >= 1000 else v[6] }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-12">
                    <i class="fas fa-video text-4xl text-gray-300 mb-4"></i>
                    <h3 class="text-xl font-medium text-gray-600 mb-2">暂无视频</h3>
                    <p class="text-gray-500">该分类下暂无视频内容</p>
                </div>
            {% endif %}
        </section>
    </main>

    <footer class="bg-white border-t border-gray-200 mt-12">
        <div class="max-w-[1440px] mx-auto px-8 py-12">
            <div class="grid grid-cols-4 gap-8 mb-8">
                <div>
                    <h3 class="text-xl font-['Pacifico'] text-primary mb-4">logo</h3>
                    <p class="text-gray-500 text-sm">让宠物的生活更有趣，让主人更放心。我们致力于为您的宠物提供最优质的视听体验。</p>
                </div>
                <div>
                    <h4 class="font-medium mb-4">快速链接</h4>
                    <ul class="space-y-2 text-sm text-gray-500">
                        <li><a href="/" class="hover:text-primary">首页</a></li>
                        <li><a href="{{ url_for('pages.video_list') }}" class="hover:text-primary">视频库</a></li>
                        <li><a href="#" class="hover:text-primary">直播频道</a></li>
                        <li><a href="{{ url_for('pages.devices_page') }}" class="hover:text-primary">设备管理</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-medium mb-4">帮助中心</h4>
                    <ul class="space-y-2 text-sm text-gray-500">
                        <li><a href="#" class="hover:text-primary">使用指南</a></li>
                        <li><a href="#" class="hover:text-primary">常见问题</a></li>
                        <li><a href="#" class="hover:text-primary">联系我们</a></li>
                        <li><a href="#" class="hover:text-primary">意见反馈</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-medium mb-4">关注我们</h4>
                    <div class="flex gap-4">
                        <a href="#" class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-primary hover:text-white">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-primary hover:text-white">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-primary hover:text-white">
                            <i class="fab fa-wechat"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    
    <script>
        async function logout() {
            console.log('logout函数被调用');
            try {
                // 检查jwtAuth对象是否存在
                if (typeof jwtAuth !== 'undefined' && jwtAuth) {
                    console.log('jwtAuth对象存在，调用logout方法');
                    await jwtAuth.logout();
                } else {
                    console.log('jwtAuth对象不存在，直接跳转到首页');
                    // 清除可能的Cookie
                    document.cookie = 'access_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                    document.cookie = 'refresh_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                    window.location.href = '/';
                }
            } catch (error) {
                console.error('登出失败:', error);
                // 即使API调用失败，也清除本地状态并跳转
                document.cookie = 'access_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                document.cookie = 'refresh_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                window.location.href = '/';
            }
        }
    </script>
</body>
</html> 